<template>
  <div class="bg">
      <div class="top">
        <div class="left">
          <img src="../img/qq.png">
        </div>
         <div class="right">
              <div class="login">
                <div style="margin-bottom: 15px;">登录你的账号</div>
                <div>
                  <a-input class="lineMargin" ref="userNameInput" @keyup="Submit($event)" v-model="userName" placeholder="请输入你的账号(admin)">
                    <a-icon slot="prefix" type="user" />
                  </a-input>
                  <a-input-password class="lineMargin" ref="userNameInput" @keyup="Submit($event)" v-model="userPwd" placeholder="请输入你的密码(123456)">
                    <a-icon slot="prefix" type="lock" />
                  </a-input-password>
                  <div class="rePwd">
                    <span>找回密码</span>
                  </div>
                  <a-button class="lineMargin" @click="Submit(2)" type="primary" block>立即登录</a-button>
                  <div class="linkB">
                    <a href="#">手机号码登录</a><span>I</span>
                    <a href="#">注册新账号</a><span>I</span>
                    <a href="#">意见反馈</a>
                  </div>
                </div>
              </div>
         </div>
      </div>
      <div class="conter">
        <div class="IcoBox" v-for="(item,ind) in IconList" :key="ind" :style="item.id == Iconval ? 'color:black' : ''"  @mouseover="mouseOn(item,ind)" @mouseout="mousOut(item,ind)">
          <div class="Icosize"><a-icon :type="item.type" theme="filled" /></div>
          <span>{{item.name}}</span>
        </div>
      </div>
     <div class="foot">
       <div class="linkA">
		   <template v-for="(item,ind) in linkList">
				<a :href="item.link">{{item.name}}</a>
				<span v-show="ind !== linkList.length - 1">I</span>
		   </template>
       </div>
       <div class="linkA">
         Copyright © 2005 - 2021 Tencent.All Rights Reserved.
       </div>
        <div class="linkA">
          龙猫企业 版权所有粤网文[2017]6138-1906号
       </div>
      </div>
  </div>
</template>
<script>
export default {
  name: 'login',
  data() {
		return {
        IconList:[],
		linkList:[],
        Iconval:'',
        userName:'',
        userPwd:''
		}
  },
  created(){
	  this.IconList = this.$store.state.IconList
	  this.linkList = this.$store.state.linkList
  },
  methods: {
    Submit(e){
      if( e === 2 || e.keyCode === 13){ //点击登录按钮
        if( this.userName === 'admin' && this.userPwd === '123456'){
		  sessionStorage.setItem("IsNewUser", JSON.stringify(true))
          this.$router.push('/workplace')
        }else{
          this.$message.error('账号或密码错误 登陆失败');
        }
      }
    },
    mouseOn(item,n){
      this.Iconval = item.id
    },
    mousOut(item,n){
      this.Iconval = ''
    }
  }
}
</script>
<style lang="less" scoped>
 .bg{
    width: 100%;
    height: 100%;
    background: url('../img/bg1.jpg') no-repeat;
    background-size: 100% 135%;
    background-position: left;
    .top{
      width: 100%;
      height: 70%;
      display: flex;
      div{
        flex: 1;
      }
      .left{
         box-sizing: border-box;
         img{
           height: 98px;
           float: right;
           margin: 10% 24% 10% 10%;
         }
      }
      .right{
        .login{
          width: 370px;
          height: 336px;
          background: white;
          border-radius: 5px;
          margin-left: 12%;
          margin-top: 6%;
          font-size: 15px;
          padding: 30px 40px 40px 40px;
          font-family: "Microsoft Yahei";
          .lineMargin{
            margin: 10px 0;
          }
          .rePwd{
            font-size: 13px;
            float: right;
            padding: 2px 0;
            cursor: pointer;
            color: slategrey;
          }
          .linkB{
            margin-top: 15px;
            display: flex;
            align-items: center;
            font-size: 12px;
            justify-content: center;
            a{
              font-size: 12px;
              font-family: "Microsoft Yahei";
              margin: 0 5px;
              color: slategrey;
            }
          }
        }
      }
    }
    .conter{
      width: 100%;
      height: 10%;
      display: flex;
      justify-content: center;
      .IcoBox{
        color: white;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        font-size: 12px;
        margin: 0 12px;
        cursor: pointer;
        .Icosize{
          font-size: 25px;
        }
      }
    }
    .foot{
      width: 100%;
      height: 20%;
      color: white;
      display: flex;
      font-size: 12px;
      justify-content: center;
      flex-direction: column;
      .linkA{
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Microsoft Yahei";
      }
      a{
		color: white;
        font-family: "Microsoft Yahei";
        margin: 0 5px;
      }
    }
 }
 
</style>
